<template>
    <div class="layoutAssist cu-flex">
        <!-- <el-button @click="zoomIn">放大</el-button>
         <el-button @click="zoomOut">缩小</el-button>
         <span>x= {{mousePoint[0]}} y= {{mousePoint[1]}}</span> -->
        <div class="cu-flex-average">
            <PanelView title="应急力量投入统计" bgClass="cmp-panel-cnt--bg" >
                <WsyjPowerStatistics></WsyjPowerStatistics>
            </PanelView>

        </div>
        <div class="cu-flex-average" style="max-height: 33.33%;">
            <PanelView title="应急队伍实时动态" bgClass="cmp-panel-cnt--bg" >
                <yjdw-real-time></yjdw-real-time>
            </PanelView>
        </div>

        <div class="cu-flex-average">
            <PanelView title="应急力量日投入统计力量需求" bgClass="cmp-panel-cnt--bg" >
                <WsyjPowerNeeds></WsyjPowerNeeds>
            </PanelView>
        </div>
    </div>
</template>
<script lang="ts">
    import {Component, Vue, Prop} from 'vue-property-decorator';
    import PanelView from '@/components/common/panel/PanelView.vue';
    import YjdwRealTime from '@/components/feature/YjdwfbModule/YjdwRealTime.vue';
    import WsyjPowerNeeds from "@/components/common/WsyjPowerNeeds.vue";
    import WsyjPowerStatistics from '@/components/common/WsyjPowerStatistics.vue';

    @Component({
        name: 'LayoutAssist',
        components: {
            PanelView,
            YjdwRealTime,
            WsyjPowerNeeds,
            WsyjPowerStatistics
        }
    })
    export default class LayoutAssist extends Vue {

        get mousePoint() {
            return this.$store.state[('mapModule' as any)].mousePoint;
        }

        private zoomIn() {
            this.$store.dispatch('mapModule/zoomUpdate', 1);
        }

        private zoomOut() {
            this.$store.dispatch('mapModule/zoomUpdate', -1);
        }
    }
</script>
<style lang="less" scoped>
    @import url('../../assets/css/LayoutAssist.less');

</style>
